<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>装备清点</span>
            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div style="text-align: center;min-width: 650px;">
            <!-- <el-card class="box-card"> -->
            <div slot="header" class="clearfix">
                <span>装备清点</span>
                <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div style="text-align: center;min-width: 650px;">
                <el-transfer style="text-align: left; display: inline-block" v-model="value4" filterable
                    :left-default-checked="[2, 3]" :right-default-checked="[1]" :titles="['器械', '清点后']"
                    :button-texts="['撤回', '清点']" :format="{
                        noChecked: '${total}',
                        hasChecked: '${checked}/${total}'
                    }" @change="handleChange" :data="formattedData">
                    <!-- <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button> -->
                    <!-- <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button> -->
                </el-transfer>
            </div>
            <!-- </el-card> -->
        </div>
        <div>
            <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
                丢件记录
            </el-button>

            <el-drawer title="What's up" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
                <!-- 用于录入信息的输入框 -->
                <el-form @submit.native.prevent>
                    <el-form-item>
                        <el-input placeholder="请输入内容" v-model="inputValue"
                            @keyup.enter.native="handleSubmit"></el-input>
                        <el-button type="primary" @click="handleSubmit" size="small">提交</el-button>
                    </el-form-item>
                </el-form>
                <!-- 显示已输入的信息 -->
                <div v-if="submittedInputs.length > 0">已输入信息：</div>
                <ul v-if="submittedInputs.length > 0">
                    <li v-for="(value, index) in submittedInputs" :key="index">{{ value }}</li>
                </ul>
            </el-drawer>
        </div>
    </el-card>

</template>

<script>
export default {
    data() {
        return {
            rawData: [], // 初始化为空数组
            value4: [],
            formattedData: [], // 初始化为空数组
            drawer: false,
            direction: 'rtl',
            inputValue: '', // 用于双向绑定输入框的值
            submittedInputs: [], // 用于存储已提交的输入值
        };
    },

    methods: {
        handleChange(value, direction, movedKeys) {
            console.log(value, direction, movedKeys);
        },
        formatData() {
            // 格式化数据
            this.formattedData = this.rawData
                .filter(item => item.classification === "器械类订单")
                .map(item => ({
                    key: item.name, // 使用名称作为唯一标识
                    label: `${item.name} ${item.quantity}个`, // 显示名称和数量
                    disabled: false // 根据需要设置是否禁用
                }));
        },
        openDrawer() {
            this.drawer = true;
            this.inputValue = ''; // 重置输入框的值
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        handleSubmit() {
            if (this.inputValue.trim() === '') {
                // 如果输入为空，则不进行任何操作
                this.$message.error('输入不能为空');
                return;
            }
            // 处理输入值，例如保存或显示
            console.log('输入的值:', this.inputValue);
            // 这里可以添加代码来处理或显示输入值
            // 例如，可以在这里将输入值添加到一个数组或隐藏抽屉等
            this.submittedInputs.push(this.inputValue.trim());
            // 重置输入框的值
            this.inputValue = '';
        },
    },
    created() {
        // 组件创建后，立即加载和格式化数据
        this.rawData = require("@/assets/jsonData/data.json");
        console.log(this.rawData)
        this.formatData(); // 格式化数据
        console.log(this.formattedData)
    }
};
</script>
<style scoped>
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;

}
</style>